<template>
  <div class="e-wrap">
    <w-form-validate @on-validate="submitModify">
      <div class="position-panel">
        <div v-if='updateParams.gfName != "you_like"'>
          <upload-img @on-img='getImg' :imgSrc='commont.img' :type='`${$route.query.curChannel == "home"? "goodsFloor" : "channelFloor"}`'></upload-img>

          <href-type v-model="wideType" :three='`${$route.query.three}`' :terminal='`PC`' :wideTemplate='updateParams.gfName'></href-type>

          <!-- 潮流新款 -->
          <div v-if="updateParams.gfName == 'new_product'">
            <div class="e-item" v-if="position == 'left'">
              <span class="title">修饰词组</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.words"></w-input>
              </div>
              <em>显示在模板下方，多个以英文逗号隔开(大衣,羊毛衫……最多6个)</em>
            </div>
            <div class="e-item" v-if="position != 'left'">
              <span class="title">标题名称</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.title_name"></w-input>
              </div>
            </div>
            <div class="e-item" v-if="position.split('_')[0] == 'right'">
              <span class="title">英文标题</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.title_ename"></w-input>
              </div>
            </div>
          </div>

          <!-- 专场,左右部分显示 -->
          <div v-if="updateParams.gfName == 'special' && position.split('_')[0] != 'middle'">
            <div class="e-item">
              <span class="title">主标题</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.parentTitle"></w-input>
              </div>
            </div>
            <div class="e-item">
              <span class="title">副标题</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="commont.childTitle"></w-input>
              </div>
            </div>
          </div>

          <!-- 商品详情 -->
          <goods-detail v-if='wideType.type == "goodsInfo"' :defaultGood='defaultGood' @on-goods='getGoodsInfoId'></goods-detail>

          <!-- 商品列表 -->
          <goods-list v-if='wideType.type == "goodsList"' :defaultChecked='defaultChecked' @on-goods='getGoodsId'></goods-list>
        </div>
        
        <!-- 猜你喜欢 -->
        <goods-list v-if='updateParams.gfName == "you_like"' :defaultChecked='defaultChecked' @on-goods='getGoodsList'></goods-list>

        <!-- 按钮 -->
        <div class='submit-btn'>
          <!-- <w-button @click='commit'>提交</w-button> -->
          <button type="submit" class="btn">提交</button>
          <button class="btn colse" @click.prevent="$router.go(-1)">取消</button>
        </div>
      </div>
    </w-form-validate>
  </div>
  
</template>

<script>
import GoodsList from '../advertMange/components/goodsList'
import UploadImg from './components/uploadImg'
import GoodsDetail from './components/goodsDetail'
import HrefType from './components/hrefType'
import { apiFloorMange, apiGoodsMange, apiGoodsByIDList } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      wideType: {
        type: 'goodsInfo',
        text: '商品货号',
        value: ''
      },
      wideGoods: '',
      commont: {
        words: '',
        title_name: '',
        title_ename: '',
        img: '',
        parentTitle: '',
        childTitle: ''
      },
      position: this.$route.query.pos, // 位置
      curChannel: this.$route.query.curChannel, // 当前频道
      // 查询楼层 信息
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id)
      },
      updateParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id),
        gfName: this.$route.query.wideTemplate,
        wideGoods: ''
      },
      goodsList: [],
      defaultChecked: [],
      defaultGood: []
    }
  },
  components: {
    'goods-list': GoodsList,
    'upload-img': UploadImg,
    'goods-detail': GoodsDetail,
    'href-type': HrefType
  },
  created() {
    this._getFloorTempInfo()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    getImg(src) {
      this.commont.img = src
    },
    // 获取商品列表 的 商品id
    getGoodsId(data) {
      let checkedId = []
      for (let i = 0; i < data.length; i++) {
        checkedId.push(data[i].id)
      }
      this.wideType.value = checkedId.join(',')
    },
    // 获取商品列表
    getGoodsList(data) {
      this.goodsList = data
    },
    // 获取商品详情 id
    getGoodsInfoId(data) {
      if (data.length) {
        this.wideType.value = data[0].id
      }
    },
    // 获取楼层模板信息
    _getFloorTempInfo() {
      this.queryParams.accessToken = this.token
      if (this.$route.query.curChannel == 'home') {
        apiFloorMange.getHFloorInfo(this.queryParams).then(data => {
          if (data && data.code != 200) return
          this.transformWideGoods(data.data.goodsFloor.wideGoods)
        })
      } else {
        apiFloorMange.getCTemp(this.queryParams).then(data => {
          if (data && data.code != 200) return
          this.transformWideGoods(data.data.widegoods.wideGoods)
        })
      }
    },
    // 解析 wideGoods，获取当前模板信息
    transformWideGoods(wideInfo) {
      // 多个广告
      if (this.updateParams.gfName == 'adv_more') {
        if (!wideInfo) {
          this.wideGoods = [{}, {}, {}]
          return
        } else {
          this.wideGoods = JSON.parse(wideInfo)
        }
        let index
        if (this.position == 'left') {
          index = 0
        } else if (this.position == 'middle') {
          index = 1
        } else {
          index = 2
        }
        this.wideType.type = this.wideGoods[index].type || 'goodsInfo'
        this.wideType.value = this.wideGoods[index].value
        this.commont.img = this.wideGoods[index].img
      }
      // 潮流新款
      if (this.updateParams.gfName == 'new_product') {
        if (!wideInfo) {
          this.wideGoods = [
            {
              left: {
                leftNo: ''
              }
            },
            {
              middle: {
                goodsList: [
                  {
                    midOneNo: '',
                    seq: 1
                  },
                  {
                    midTwoNo: '',
                    seq: 2
                  },
                  {
                    midThrNo: '',
                    seq: 3
                  },
                  {
                    midFourNo: '',
                    seq: 4
                  },
                  {
                    midFiveNo: '',
                    seq: 5
                  },
                  {
                    midSixNo: '',
                    seq: 6
                  }
                ]
              }
            },
            {
              right: {
                goodsList: [
                  {
                    subTitle: '',
                    rightNoOne: '',
                    seq: 1
                  },
                  {
                    subTitle: '',
                    rightNoTwo: '',
                    seq: 2
                  },
                  {
                    subTitle: '',
                    rightNoThree: '',
                    seq: 3
                  },
                  {
                    subTitle: '',
                    rightNoThree: '',
                    seq: 4
                  },
                  {
                    subTitle: '',
                    rightNoThree: '',
                    seq: 5
                  }
                ],
                title: {
                  titleName: '',
                  enName: ''
                }
              }
            }
          ]
          return
        } else {
          this.wideGoods = JSON.parse(wideInfo)
        }
        let newProduct = {}
        if (this.position == 'left') {
          newProduct = this.wideGoods[0].left
          this.commont.words = newProduct.keyWord ? newProduct.keyWord.slice(1, -1) : ''
        } else if (this.position.split('_')[0] == 'right') {
          const index = this.position.split('_')[1]
          newProduct = this.wideGoods[2].right.goodsList[index]
          this.commont.title_name = this.wideGoods[2].right.title.titleName || ''
          this.commont.title_ename = this.wideGoods[2].right.title.enName || ''
        } else {
          const index = this.position.split('_')[1]
          newProduct = this.wideGoods[1].middle.goodsList[index]
          this.commont.title_name = newProduct.titleName || ''
        }
        this.wideType.type = newProduct ? newProduct.type : 'goodsInfo'
        this.wideType.value = newProduct ? newProduct.value : ''
        this.commont.img = newProduct ? newProduct.img : ''
      }
      // 长条广告
      if (this.updateParams.gfName == 'advinfo') {
        if (!wideInfo) {
          this.wideGoods = [{}]
          return
        } else {
          this.wideGoods = JSON.parse(wideInfo)
        }
        this.wideType.type = this.wideGoods[0].type || 'goodsInfo'
        this.wideType.value = this.wideGoods[0].value
        this.commont.img = this.wideGoods[0].img
      }
      // 专场
      if (this.updateParams.gfName == 'special') {
        if (!wideInfo) {
          this.wideGoods = [
            {
              left: {}
            },
            {
              middle: {
                goodsList: [
                  {
                    seq: 1
                  },
                  {
                    seq: 2
                  },
                  {
                    seq: 3
                  },
                  {
                    seq: 4
                  },
                  {
                    seq: 5
                  },
                  {
                    seq: 6
                  }
                ]
              }
            },
            {
              right: {
                goodsList: [
                  {
                    seq: 1
                  },
                  {
                    seq: 2
                  },
                  {
                    seq: 3
                  }
                ]
              }
            }
          ]
          return
        } else {
          this.wideGoods = JSON.parse(wideInfo)
        }
        let special = {}
        if (this.position == 'left') {
          special = this.wideGoods[0].left
          this.commont.parentTitle = special.titleName
          this.commont.childTitle = special.subtitleName
        } else if (this.position.split('_')[0] == 'right') {
          let index = this.position.split('_')[1]
          special = this.wideGoods[2].right.goodsList[index]
          this.commont.parentTitle = special.titleName
          this.commont.childTitle = special.desc
        } else {
          let index = Number(this.position.split('_')[1])
          special = this.wideGoods[1].middle.goodsList[index]
        }
        this.wideType.type = special.type || 'goodsInfo'
        this.wideType.value = special.value || ''
        this.commont.img = special.img || ''
      }
      // 设计师
      if (this.updateParams.gfName == 'designer') {
        if (!wideInfo) {
          this.wideGoods = [{}, {}, {}]
          return
        } else {
          this.wideGoods = JSON.parse(wideInfo)
        }
        this.wideType.type = this.wideGoods[this.position].type || 'goodsInfo'
        this.wideType.value = this.wideGoods[this.position].value || ''
        this.commont.img = this.wideGoods[this.position].img || ''
      }
      // 猜你喜欢
      if (this.updateParams.gfName == 'you_like') {
        if (!wideInfo) {
          this.wideGoods = [
            {
              goodsList: []
            }
          ]
          return
        } else {
          this.wideGoods = JSON.parse(wideInfo)
        }
        this.defaultChecked = this.wideGoods[0].goodsList.map(item => {
          return {
            deleted: false,
            id: item.goodsId,
            goodsName: item.goodsName,
            lowestPrice: item.goodsPrice,
            goodsSerial: item.goodsSerial,
            goodsMainPhotoPath: item.img
          }
        })
      }
      if (this.wideType.type == 'goodsList') {
        // this.defaultChecked = []
        const par = {
          accessToken: this.token,
          threeMenuCode: this.$route.query.three,
          ids: this.wideType.value.split(',')
        }
        apiGoodsByIDList(par).then(data => {
          if (data && data.code != 200) return
          this.defaultChecked = data.data.map(item => {
            return {
              deleted: false,
              id: item.id,
              goodsName: item.goodsName,
              goodsMainPhotoPath: item.goodsMainPhotoPath
            }
          })
        })
      }
      if (this.wideType.type == 'goodsInfo') {
        this.defaultGood = []
        if (this.wideType.value) {
          this.queryGood(Number(this.wideType.value), this.defaultGood)
        }
      }
    },
    // 拼 wideGoods
    getWideGoods() {
      if (!this.commont.img) {
        this.$toast('请上传图片')
        return false
      }
      if (!this.wideType.value) {
        if (this.wideType.type == 'goodsList') {
          this.$toast('请选择商品')
          return false
        } else {
          this.$toast(`请填写${this.wideType.text}`)
          return false
        }
      }
      let obj = {
        type: this.wideType.type,
        value: this.wideType.value,
        img: this.commont.img
      }
      // 多个广告
      if (this.updateParams.gfName == 'adv_more') {
        if (this.position == 'left') {
          this.wideGoods[0] = obj
        } else if (this.position == 'middle') {
          this.wideGoods[1] = obj
        } else {
          this.wideGoods[2] = obj
        }
      }
      // 潮流新款
      if (this.updateParams.gfName == 'new_product') {
        let index = this.position.split('_')[1]
        let wordArr = this.commont.words ? this.commont.words.replace(/，/ig, ',').split(',') : []
        if (wordArr.length > 6) {
          wordArr = wordArr.slice(0, 6)
        }
        if (this.position == 'left') {
          this.wideGoods[0].left = {
            type: obj.type,
            value: obj.value,
            img: obj.img,
            keyWord: '[' + wordArr.join(',') + ']', // 中文逗号替换成英文逗号
            leftNo: ''
          }
        } else if (this.position.split('_')[0] == 'right') {
          // if (this.wideGoods[2].right.goodsList[index]) {
          //   this.wideGoods[2].right.goodsList[index]
          // }
          this.wideGoods[2].right.goodsList[index].type = obj.type
          this.wideGoods[2].right.goodsList[index].value = obj.value
          this.wideGoods[2].right.goodsList[index].img = obj.img
          this.wideGoods[2].right.title.titleName = this.commont.title_name
          this.wideGoods[2].right.title.enName = this.commont.title_ename
        } else {
          this.wideGoods[1].middle.goodsList[index].type = obj.type
          this.wideGoods[1].middle.goodsList[index].value = obj.value
          this.wideGoods[1].middle.goodsList[index].img = obj.img
          this.wideGoods[1].middle.goodsList[index].titleName = this.commont.title_name
        }
      }
      // 长条广告
      if (this.updateParams.gfName == 'advinfo') {
        this.wideGoods[0] = obj
      }
      // 专场
      if (this.updateParams.gfName == 'special') {
        if (this.position == 'left') {
          const s_left = {
            titleName: this.commont.parentTitle,
            subtitleName: this.commont.childTitle,
            goodsSerial: this.wideType == 'goodsInfo' ? this.wideType.value : ''
          }
          this.wideGoods[0].left = Object.assign(obj, s_left)
        } else if (this.position.split('_')[0] == 'right') {
          let specialIndex = Number(this.position.split('_')[1])
          this.wideGoods[2].right.goodsList[specialIndex].type = obj.type
          this.wideGoods[2].right.goodsList[specialIndex].value = obj.value
          this.wideGoods[2].right.goodsList[specialIndex].img = obj.img
          this.wideGoods[2].right.goodsList[specialIndex].titleName = this.commont.parentTitle
          this.wideGoods[2].right.goodsList[specialIndex].desc = this.commont.childTitle
          this.wideGoods[2].right.goodsList[specialIndex].goodsSerial = this.wideType == 'goodsInfo' ? this.wideType.value : ''
        } else {
          let specialIndex = Number(this.position.split('_')[1])
          this.wideGoods[1].middle.goodsList[specialIndex].type = obj.type
          this.wideGoods[1].middle.goodsList[specialIndex].value = obj.value
          this.wideGoods[1].middle.goodsList[specialIndex].img = obj.img
          this.wideGoods[1].middle.goodsList[specialIndex].goodsSerial = this.wideType == 'goodsInfo' ? this.wideType.value : ''
        }
      }
      // 设计师
      if (this.updateParams.gfName == 'designer') {
        this.wideGoods[this.position] = Object.assign(obj, {goodsSerial: this.wideType == 'goodsInfo' ? this.wideType.value : ''})
      }
      return JSON.stringify(this.wideGoods)
    },
    submitModify() {
      this.updateParams.accessToken = this.token
      if (this.updateParams.gfName == 'you_like') {
        if (!this.goodsList.length) {
          this.$toast('请选择商品')
          return
        }
        let index = 0
        this.wideGoods[0].goodsList = this.goodsList.map(item => {
          return {
            type: 'goodsInfo', 
            value: item.id,
            seq: index++,
            goodsId: item.id,
            goodsName: item.goodsName,
            goodsPrice: item.lowestPrice || 0,
            img: item.goodsMainPhotoPath,
            goodsSerial: item.goodsSerial
          }
        })
        this.updateParams.wideGoods = JSON.stringify(this.wideGoods)
      } else {
        if (!this.getWideGoods()) return
        this.updateParams.wideGoods = this.getWideGoods()
      }
      if (this.$route.query.curChannel == 'home') {
        apiFloorMange.editHTemp(this.updateParams).then(data => {
          if (data.code != 200) return
          this.$toast('编辑成功', () => {
            this.$router.go(-1)
          })
        })
      } else {
        apiFloorMange.editCTemp(this.updateParams).then(data => {
          if (data.code != 200) return
          this.$toast('编辑成功', () => {
            this.$router.go(-1)
          })
        })
      }
    },
    queryGood(id, arr) {
      const par = {
        accessToken: this.token,
        threeMenuCode: this.$route.query.three,
        id: id
      }
      apiGoodsMange.apiGoodsEdit(par).then(data => {
        if (data && data.code != 200) return
        let obj = {
          deleted: false,
          id: data.data.goodsDraft.id,
          goodsName: data.data.goodsDraft.goodsName,
          lowestPrice: data.data.goodsDraft.storePrice,
          goodsSerial: data.data.goodsDraft.goodsSerial,
          goodsMainPhotoPath: data.data.goodsDraft.goodsMainPhotoPath
        }
        arr.push(obj)
      })
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.position-panel {
  width: 978px;
  min-height: 600px;
  margin: 0 auto;
  .e-item {
    display: block;
    width: 405px;
    margin: 0 auto 20px !important;
    .title {
      width: 106px;
      font-size: 14px;
    }
    .dis-block {
      width: 284px;
    }
    img {
      width: 54px;
      height: 54px;
    }
    em {
      display: block;
      color: $color-main;
      text-align: right;
    }
  }
}
.submit-btn {
  text-align: center;
  margin-top: 20px;
  button {
    width: 90px !important;
  }
}
</style>
